<template>
	<view class="nav-bars" :class="currentIndex == 1 ? 'colorActive' : ''">
		<navbar>
			<view slot="left" class="left">
				<image src="@/static/icons/chat.png" mode=""></image>
			</view>
			<view slot="center" class="center">
				<view @tap="itemClick(index)" v-for="(item, index) in title" :key="index" class="recommend" :class="index == currentIndex ? 'active' : ''">
					{{item}}
				</view>

			</view>
			<view slot="right">
				<view  class="right">
					<image class="search" src="@/static/icons/search.png"></image>
					<image src="@/static/icons/cart.png"></image>
				</view>
			</view>
		</navbar>
	</view>
</template>

<script>
	import navbar from '@/components/navbar/navbar.vue'
	export default {
		data() {
			return {
				title: ['推荐', '品牌'],
				currentIndex: 0,
			}
		},
		components: {
			navbar
		},
		methods: {
			itemClick(index) {
				this.currentIndex = index;
				this.$emit('itemClicks', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bars {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 2;
	}

	.nav-bar {
		// background-color: #212724;
		color: #FFFFFF;
		// padding: 0 30rpx;
	}

	.left {
		width: 42rpx;
		height: 42rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.right {
		padding-right: 30rpx;
		width: 200rpx;
		image {
			width: 42rpx;
			height: 42rpx;
		}

		.search {
			margin-right: 36rpx;
		}
	}

	.center {
		display: flex;
		justify-content: space-between;
		// transform: translateX(25%);

		view.recommend {
			margin-right: 33rpx;

			&:nth-child(2) {
				margin: 0;
			}
		}

		.active {
			padding-bottom: 13rpx;
			border-bottom: 6rpx solid #fff;
		}
	}

	.colorActive {
		background-color: #354E44;
	}
</style>
